<template>
    <el-table :data="ticket" stripe border style="width: 100%; font-size: 14px; color: #333">
 <el-table-column label="序号" type='index' width="55" align="center"/>
 <el-table-column prop="number" label="车次"/>
 <el-table-column prop="nowAddress" label="出发站"  />
 <el-table-column prop="nextAddress" label="终点站" />
 <el-table-column prop="beginTime" label="发车时间" />
 <el-table-column prop="endTime" label="到站时间" />
 <el-table-column prop="carriageNumber" label="车厢号" />
 <el-table-column prop="seatNumber" label="座位号" />
 <el-table-column prop="price" label="票价" />
 <el-table-column prop="op" label="操作" width="100">
 <template #default="scope">
    <el-button type="primary" @click="handleBuy(scope.row)">支付</el-button>
   <el-button type="danger" @click="handleDelete(scope.row)">退票</el-button>
 </template>
</el-table-column>
</el-table>
</template>

<script setup>
import { ref ,onMounted} from 'vue'
import { searchMyTicket,delMyTicket,buy } from '../api/pay'
const ticket = ref([])

onMounted(() => {
 searchMyTicket(localStorage.getItem("userId")).then(res => {
ticket.value = res.data
}
).catch(err => {
console.log(err)
alert("查询失败！")
})
});

function handleDelete(row) {
 delMyTicket(row.id).then(res => {
   alert("退票成功！")
   searchMyTicket(localStorage.getItem("userId")).then(res => {
     ticket.value = res.data
   }).catch(err => {
     console.log(err)
     alert("查询失败！")
   })
}).catch(err => {
console.log(err)
alert("查询失败！")
})
}
function handleBuy(row) {
 buy(row.id).then(res => {
   alert("支付成功！")
   searchMyTicket(localStorage.getItem("userId")).then(res => {
     ticket.value = res.data
   }).catch(err => {
     console.log(err)
     alert("查询失败！")
   })
}).catch(err => {
console.log(err)
alert("支付失败！")
})
}
</script>